<template>
  <div class="app-container">  
      <el-form ref="filterForm" :model="formData" :rules="rules" label-position="left" label-width="100px">
        <el-form-item label="标题" prop="prodName">
          <el-input v-model="formData.prodName" clearable placeholder="机构名称" maxlength="80" show-word-limit/>
        </el-form-item>
        <el-form-item label="规模" prop="scope">
          <el-input v-model="formData.scope" clearable placeholder="机构名称" maxlength="80" show-word-limit/>
        </el-form-item>
        <el-form-item label="底层资产" prop="capital">
           <el-select v-model="formData.realtionType" @change="handleRelationTypeChange" placeholder="资产类型">
            <el-option
              v-for="item in realtionTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
           <el-select v-if="formData.realtionType == 1 || formData.realtionType == 4" v-model="formData.industryID" placeholder="--选择行业--">
            <el-option
              v-for="item in industryOptions"
              :key="item.ID"
              :label="item.industryName"
              :value="item.ID">
            </el-option>
          </el-select>     
           <el-select v-if="formData.realtionType == 2 || formData.realtionType == 3" v-model="formData.futuresID" placeholder="--选择期货--">
            <el-option
              v-for="item in futuresOptions"
              :key="item.ID"
              :label="item.futuresName"
              :value="item.ID">
            </el-option>
          </el-select>      
           <el-select v-if="formData.realtionType > 4" v-model="formData.indexID" placeholder="--选择指数--">
            <el-option
              v-for="item in marketOptions"
              :key="item.marketID"
              :label="item.marketName"
              :value="item.marketID">
            </el-option>
          </el-select>                   
          
        </el-form-item>
        <el-form-item label="收益" prop="scope">
          <el-input v-model="formData.maxRate" placeholder="最大收益" />
          <el-input v-model="formData.minRate" placeholder="最小收益"/>
        </el-form-item>
        <el-form-item label="认购" prop="scope">
          <el-input v-model="formData.maxRate" placeholder="最大收益" />
          <el-input v-model="formData.minRate" placeholder="最小收益"/>
        </el-form-item>
        <el-form-item label="预售" prop="subscribeDates">
          <el-date-picker 
          clearable
            v-model="formData.subscribeDates"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="封盘">
          <el-date-picker 
          clearable
            v-model="formData.closedDates"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结算">
          <el-date-picker 
          clearable
            v-model="formData.settlementDates"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <Tinymce v-model="formData.content" />
        </el-form-item>
        <el-form-item label="LOGO" prop="inventoryLogo">
          <Upload v-model="formData.logo" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="formData.remark" maxlength="200" show-word-limit clearable placeholder="备注"/>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="14">          
            <el-button type="info" @click="onFormSaveButton()">保存</el-button>
            <el-button type="primary" @click="onFormSaveAndNewButton()">保存并新建</el-button>
            <el-button type="primary" @click="onFormNewButton()">新建</el-button>
        </el-col>
        <el-col :span="6" style="text-align:right;">          
          <el-button type="warning" @click="onFormCannelButton()">取消</el-button>
          <el-button type="danger" v-if="inventoryID > 0" @click="onFormRemoveButton()">删除</el-button>
        </el-col>
      </el-row>

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Chnannel from '@/components/Channel/ChannelSimple'
import Upload from '@/components/Upload/SingleImage3'
import Tinymce from '@/components/Tinymce'
import {getInventoryDetail,saveInventory,removeInventory} from '@/api/fund/inventory'
import {getIndustryUsableList} from '@/api/knowledge/industry'
import {getFuturesUsableList} from '@/api/knowledge/futures'
import {getOptionUsableList} from '@/api/knowledge/option'



export default {
  name: 'inventoryForm',
  components: { Chnannel,Upload,Tinymce },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      inventoryID:undefined,
      realtionTypeListOptions:[],
      futuresOptions:[],
      industryOptions:[],
      //资产类型【1股票，2期货，3期货期权，4股票期权，5指数，6指数期权】
      realtionTypeOptions:[
        {
          label:"股票",
          value:1
        },
        {
          label:"期货",
          value:2
        },
        {
          label:"期货期权",
          value:3
        },
        {
          label:"指数",
          value:5
        },
        {
          label:"指数期权",
          value:6
        }
      ],
      formData: {
        realtionType:"0",
        realtionTypeID:"0"
      },
      rules:{
         inventoryName: [
            { required: true, message: '请输入机构名称', trigger: 'blur' },
            { min: 3, max: 80, message: '长度在 3 到 80 个字符', trigger: 'blur' }
          ],
         establishDate: [
            { required: true, message: '请选择/输入成立日期', trigger: 'blur' },
            { len: 10, message: '日期应为10位', trigger: 'blur' }
          ],
         inventoryRegAddress: [
            { required: true, message: '请输入机构注册地址', trigger: 'blur' },
            { min: 2, max: 80, message: '长度在 2 到 80 个字符', trigger: 'blur' }
          ],
      }
    }
  },
  created() {
    let inventoryID = this.$route.query.inventoryID 
    inventoryID = parseInt(inventoryID)
    if(isNaN(inventoryID) == false){
      this.inventoryID = inventoryID
      this.getInfo()
    }
  },
  methods: {
    getInfo:function(){
      let _this = this;
      getInventoryDetail({
        "inventoryID":this.inventoryID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.formData = response.data
            this.formData.inventoryID = this.inventoryID
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleRelationTypeChange:function($event){
      console.log($event)
      //资产类型【1股票，2期货，3期货期权，4股票期权，5指数，6指数期权】
      if($event == 1){
        this.rereshIndustryList()
      }
      if($event == 2){
        this.rereshFuturesList()
      }
      if($event == 3){
        this.rereshFuturesList()
      }
      if($event == 4){
        this.rereshIndustryList()
      }
      if($event == 5){

      }
      if($event == 6){

      }
    },
    rereshFuturesList:function(){
      let _this = this
      getFuturesUsableList({
        "size":100
      }).then(res=>{
          console.log(res.data)
        if(res.code == 200){
          _this.futuresOptions = res.data.list;
        }
      });
    },
    rereshIndustryList:function(){
      let _this = this
      getIndustryUsableList({
        "parentIndustryID":101
      }).then(res=>{
          console.log(res.data)
        if(res.code == 200){
          _this.industryOptions = res.data.list;
        }
      });
    },
    onFormSaveButton:function(){
      let _this = this;
      this.$refs['filterForm'].validate((valid) => {
        if (valid) {
          console.log(_this.formData.channelID)
            saveInventory(_this.formData).then((response) => {
              console.log("getList",response)
                if (response.code === 200) {
                  _this.$message({
                    message: "成功",
                    type: 'error'
                  })
                } else {
                  _this.$message({
                    message: response.msg,
                    type: 'error'
                  })
                }
            })
        } else {
            console.log('error submit!!');
            return false;
        }
      })
    },
    onFormSaveAndNewButton:function(){
      let _this = this;
      saveInventory(_this.formData).then((response) => {
          if (response.code === 200) {
            _this.onFormNewButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onFormNewButton:function(){
        this.formData = {

        }
    },
    onFormCannelButton:function(){
      this.$router.push({ path: 'inventory'})
    },
    onFormRemoveButton:function(){
      let _this = this;
      removeInventory({
        "inventoryID":this.inventoryID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.onFormCannelButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
<style>
</style>